<template>
  <div class="content">
    <div id="printWrap" class="print_wrap" style="font-size: 12px">
      <template v-if="obj.ddstatus == '1'">
        <div>{{ $t("message.cgmc") }}：{{ obj.venueName }}</div>
        <div>{{ $t("message.syry") }}：{{ obj.shopUser }}</div>
        <div>{{ $t("message.ddbh") }}：{{ obj.orderId }}</div>
        <div>{{ $t("message.tksj") }}：{{ obj.payTime }}</div>
        <div style="margin-top: 10px; display: flex">
          <div
            v-for="i in 30"
            :key="i"
            style="border-bottom: 1px solid; flex: 1; margin: 0 2px 10px"
          />
        </div>
        <div style="display: flex; margin-bottom: 4px">
          <span style="width: 200px">{{ $t("message.spmc") }}</span>
          <span style="width: 60px">{{ $t("message.dprice") }}</span>
          <span style="width: 60px">{{ $t("message.num") }}</span>
          <span style="width: 60px">{{ $t("message.jine") }}</span>
        </div>
        <template v-for="good,i in obj.goodsList">
          <div
            :key="'xx' + i"
            style="display: flex; margin-bottom: 4px"
          >
            <span style="width: 200px">{{ good.name }}</span>
            <span style="width: 60px">{{ good.price }}</span>
            <span style="width: 60px">{{ good.num }}</span>
            <span style="width: 60px">{{ good.totalPrice }}</span>
          </div>
          <br v-if="good.name.length > 11" :key="'xb' + i">
        <!-- <br v-if="good.name.length > 22" :key="'xb' + i">
        <br v-if="good.name.length > 33" :key="'xc' + i"> -->
        </template>
        <div style="margin-top: 10px; display: flex">
          <div
            v-for="i in 30"
            :key="i"
            style="border-bottom: 1px solid; flex: 1; margin: 0 2px 10px"
          />
        </div>
        <div style="display: flex; margin-bottom: 4px">
          <div style="width: 160px">
            {{ $t("message.tkje") }}：{{ obj.money }}
          </div>
          <div style="flex: 1">
            {{ $t("message.zsl") }}：{{ obj.num }}
          </div>
        </div>
        <div style="display: flex; margin-bottom: 4px">
          {{ $t("message.tkfs") }}：{{ obj.payMethod }}
        </div>
        <br v-if="obj.remark || obj.remask">
        <div v-if="obj.remark || obj.remask" style="word-break: break-all;text-align: justify;text-justify: auto;">
          {{ $t("message.bz") }}：{{ obj.remark || obj.remask }}
        </div>
        <br v-if="obj.remark || obj.remask">
        <br v-if="(obj.remark && obj.remark.length > 20) || (obj.remask && obj.remask.length > 20)">
        <div style="margin-top: 10px; display: flex">
          <div
            v-for="i in 30"
            :key="i"
            style="border-bottom: 1px solid; flex: 1; margin: 0 2px 10px"
          />
        </div>
        <div v-if="obj.keyLine" style="margin-bottom: 4px">
          <strong>{{ obj.keyLine }}</strong>
        </div>
        <div v-if="!obj.keyLine && obj.useKeyOne" style="margin-bottom: 4px">
          <strong>{{ $t("message.hyxx") }}</strong>
        </div>
        <div style="margin-bottom: -10px;word-break: break-all;text-align: justify;text-justify: auto;">
          {{ obj.keyName || $t("message.name") + '：' }}{{ obj.useKeyOne || obj.userName }}
        </div>
        <br>
        <div style="margin-bottom: -10px;word-break: break-all;text-align: justify;text-justify: auto;">
          {{ obj.keyPhone || $t("message.sjh") + '：' }}{{ obj.useKeyTwo || obj.userPhone }}
        </div>
        <br>
        <div v-if="obj.memberLevel || obj.useKeyThree" style="margin-bottom: -10px">
          {{ obj.keyMemberLevel || $t("message.hydj") + '：' }}{{ obj.memberLevel || obj.useKeyThree }}
        </div>
        <br>
        <div style="margin-top: 10px; display: flex">
          <div
            v-for="i in 30"
            :key="i"
            style="border-bottom: 1px solid; flex: 1; margin: 0 2px 10px"
          />
        </div>
        <div style="margin-top: 10px;height: auto;text-align: center">
          {{ $t("message.hyxcgl") }}
        </div>
        <div style="width: 100%; margin-top: 24px; text-align: center">·</div>
      </template>
      <template v-else>
        <div>{{ $t("message.ddbh") }}：{{ obj.orderId }}</div>
        <div>{{ $t("message.zfrq") }}：{{ obj.payTime }}</div>
        <div style="margin-top: 10px; display: flex">
          <div
            v-for="i in 30"
            :key="i"
            style="border-bottom: 1px solid; flex: 1; margin: 0 2px 10px"
          />
        </div>
        <div style="display: flex; margin-bottom: 4px">
          <span style="width: 200px">{{ $t("message.spmc") }}</span>
          <span style="width: 60px">{{ $t("message.dprice") }}</span>
          <span style="width: 60px">{{ $t("message.num") }}</span>
          <span style="width: 60px">{{ $t("message.jine") }}</span>
        </div>
        <template v-for="good,i in obj.goodsList">
          <div
            :key="'xx' + i"
            style="display: flex; margin-bottom: 4px"
          >
            <span style="width: 200px">{{ good.name }}</span>
            <span style="width: 60px">{{ good.price }}</span>
            <span style="width: 60px">{{ good.num }}</span>
            <span style="width: 60px">{{ good.totalPrice }}</span>
          </div>
          <br v-if="good.name.length > 11" :key="'xb' + i">
        <!-- <br v-if="good.name.length > 22" :key="'xb' + i">
        <br v-if="good.name.length > 33" :key="'xc' + i"> -->
        </template>
        <div style="margin-top: 10px; display: flex">
          <div
            v-for="i in 30"
            :key="i"
            style="border-bottom: 1px solid; flex: 1; margin: 0 2px 10px"
          />
        </div>
        <div style="display: flex; margin-bottom: 4px">
          <div style="width: 160px">
            {{ $t("message.yfk2") }}：{{ obj.money }}
          </div>
          <div style="flex: 1">
            {{ $t("message.num") }}：{{ obj.num }}
          </div>
        </div>
        <div style="display: flex; margin-bottom: 4px">
          <div style="width: 160px">
            {{ $t("message.sfk") }}：{{ obj.realMoney }}
          </div>
          <div style="flex: 1">
            {{ $t("message.zl") }}：{{ obj.zeroMoney }}
          </div>
        </div>
        <div v-if="obj.payMethod" style="margin-bottom: 4px">
          {{ $t("message.fkfs") }}：{{ obj.payMethod }}
        </div>
        <br v-if="obj.remark">
        <div v-if="obj.remark" style="word-break: break-all;text-align: justify;text-justify: auto;">
          {{ $t("message.bz") }}：{{ obj.remark }}
        </div>
        <br v-if="obj.remark">
        <br v-if="obj.remark && obj.remark.length > 20">
        <div style="margin-top: 10px; display: flex">
          <div
            v-for="i in 30"
            :key="i"
            style="border-bottom: 1px solid; flex: 1; margin: 0 2px 10px"
          />
        </div>
        <div style="margin-bottom: 4px">
          <strong>{{ $t("message.hyxx") }}</strong>
        </div>
        <div style="margin-bottom: -10px;word-break: break-all;text-align: justify;text-justify: auto;">
          {{ $t("message.name") }}：{{ obj.useKeyOne || obj.userName }}
        </div>
        <br>
        <div style="margin-bottom: -10px;word-break: break-all;text-align: justify;text-justify: auto;">
          {{ $t("message.sjh") }}：{{ obj.useKeyTwo || obj.userPhone }}
        </div>
        <br>
        <div v-if="obj.useKeyThree" style="margin-bottom: -10px;word-break: break-all;text-align: justify;text-justify: auto;">
          {{ $t("message.hydj") }}：{{ obj.useKeyThree }}
        </div>
        <br v-if="obj.useKeyThree">
        <div v-if="obj.memberLevel" style="margin-bottom: -10px;word-break: break-all;text-align: justify;text-justify: auto;">
          {{ $t("message.hydj") }}：{{ obj.memberLevel }}
        </div>
        <br v-if="obj.memberLevel">
        <div style="margin-top: 10px; display: flex">
          <div
            v-for="i in 30"
            :key="i"
            style="border-bottom: 1px solid; flex: 1; margin: 0 2px 10px"
          />
        </div>
        <div style="margin-top: 10px;height: auto;text-align: center">
          {{ desc }}
        </div>
        <div style="width: 100%; margin-top: 24px; text-align: center">·</div>
      </template>
    </div>
  </div>
</template>

<script>
import print from 'print-js'
export default {
  data() {
    return {
      obj: {
        erCode: ''
      },
      desc: this.$t('message.rechargeTemPlace')
    }
  },
  methods: {
    nr(cnt) {
      return cnt.length
    },
    print() {
      const { obj } = this
      let header = this.$t('message.hyjr') + `${obj.venueName}`
      if (obj.header) {
        header = obj.header
      } else if (obj.ddstatus === '1') {
        header = this.$t('message.thd')
      }
      console.log('obj2', obj)
      print({
        printable: 'printWrap',
        type: 'html',
        header: header,
        headerStyle:
          'font-weight: 500;font-size: 24px;line-height: 26px;margin-bottom: 30px;text-align: center;',
        maxWidth: 300,
        font_size: '10pt',
        targetStyles: ['*']
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  position: fixed;
  left: -1000px;
  bottom: -1000px;
  width: 300px;
}
</style>
